<template>
    <div id="homePage">
        <div id="header">
            <p class="header-mark"></p>
            <p class="header-title">中国银行</p>
            <p class="header-title-spell">JIANGSU COMMERCIAL WORLD BANK</p>
            <p class="header-title-2">办公自动化系统</p>
            <p class="header-title-spell-2">OFFICE AUTOMATION SYSTEM</p>
            <div class="header-content">
                <p class="header-content-headpic"></p>
                <p class="header-content-person"> USER,你好,欢迎回来！</p>
                <p class="header-content-suggest">意见与建议</p>
                <p class="header-content-serve">技术服务热线:800 820 8820</p>
                <!-- <p class="header-time">{{nowTime}}</p> -->
                <p class="individual" @click="individual">
                    <i class=""></i>个人中心
                </p>
                <p class="exit" @click="exit">
                    <i class="el-icon-switch-button"></i> 退出
                </p>
            </div>
        </div>
        <div id="nav">
            <ul>
                <li><router-link active-class="firstPageIndex" to="/firstPageIndex" name="/firstPageIndex" style="text-decoration:none;"><p>首页</p></router-link></li>
                <li><router-link to="/customerPage" name="/customerPage" style="text-decoration:none;"><p>客户服务系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>公文管理系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>电子邮件系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>督办系统</p></router-link></li>
                <li><router-link to="/conferenceManage" name="/conferenceManage" style="text-decoration:none;"><p>会议通信系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>资产管理系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>绩效考核系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>员工管理系统</p></router-link></li>
                <li><router-link to="/#" name="/" style="text-decoration:none;"><p>系统帮助</p></router-link></li>
            </ul>
        </div>

        <el-main class="main-content">
            <router-view />
        </el-main>
    </div>
</template>

<script>

export default ({
    name: "HomePage",
    data() {
        return {
        }
    },
    methods: {
        exit(){},
        individual(){
            this.$router.push({ name: "IndividualCenter" });
        },
    },
    mounted() {
        this.$router.push({ name: "HomePageIndex" });
        // this.$router.push({ name: "ConferenceReservation" });
    }
})
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
#homePage{
    width: 100%;
    height: 100%;
    position: absolute;
    top: -3px;
    left: -3px;
    background-color: #f4f7fd;
}
#header{
    width: 1535px;
    height: 80px;
    line-height: 80px;
    position: absolute;
    background-color: green;
    background-image: url("/src/assets/homePage-header.png");
}
.header-mark{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 160px;
    background-image: url("/src/assets/login-mark.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.header-title{
    width: 500px;
    height: 80px;
    font-size: 35px;
    font-family: "宋体";
    font-weight: bold;
    color: white;
    position: absolute;
    top: -5px;
    left: 330px;
}
.header-title-spell{
    position: absolute;
    top: 25px;
    left: 254px;
}
.header-title-2{
    width: 300px;
    height: 80px;
    line-height: 80px;
    position: absolute;
    left: 600px;
    top: -5px;
    font-size: 25px;
    font-family: "宋体";
    color: white;
}
.header-title-spell-2{
    position: absolute;
    top: 25px;
    left: 580px;
}
.header-content{
    width: 400px;
    height: 80px;
    position: absolute;
    left: 1137px;
}
.header-content-headpic{
    position: relative;
    top: 5px;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid white;
    background-color: wheat;
    background-image: url("/src/assets/header.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.header-content-person{
    position: relative;
    top: -45px;
    left: 5px;
    font-size: 15px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: rgb(255, 255, 255);
    display: inline-block;  
}
.header-content-suggest{
    position: relative;
    top: -70px;
    left: 105px;
    font-size: 12px;
    width: 120px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: rgb(255, 255, 255);
}
.header-content-suggest:hover{
    color: rgb(6, 173, 14);
}
.header-content-serve{
    position: relative;
    top: -105px;
    left: 60px;
    font-size: 12px;
    width: 220px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: rgb(255, 255, 255);
    display: inline-block;   
}
.header-content-serve:hover{
    color: rgb(243, 132, 5);
}
.individual{
    width: 60px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    text-align: center;
    position: relative;
    top: -190px;
    left: 330px;
    border-radius: 5px;
    color: rgb(245, 245, 245);
}
.individual:hover{
    color:rgb(255, 255, 255);
    width: 60px;
    height: 25px;
    background-color: salmon;
}
.exit{
    width: 60px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -180px;
    left: 330px;
    border-radius: 5px;
    color: rgb(255, 255, 255);
}
.exit:hover{
    color:rgb(255, 255, 255);
    width: 60px;
    height: 25px;
    background-color: rgb(248, 41, 18);
}


#nav{
    position: absolute;
    top: 80px;
    width: 1535px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    border-bottom: 4px solid rgb(189, 188, 188);
    background-color: rgb(240, 237, 237);
}
#nav ul{
    list-style: none;
    position: relative;
    left: 150px;
}
#nav ul li{
    float: left;
    width: 120px;
    text-align: center;
    border-left: 2px solid rgb(223, 220, 220);
}
#nav ul li p{
    color: black;
    width: 100px;
    height: 35px;
    line-height: 35px;
    margin: auto;
    margin-top: 5px;
}
#nav ul li p:hover{
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    margin-top: 8px;
    border: 2px solid gray;
    border-bottom: 2px solid rgb(189, 188, 188);
    border-radius: 10px 10px 0px 0px;
    background-color: rgb(245, 242, 242);
}
#nav ul li:last-child{
    border-right: 2px solid rgb(223, 220, 220);
}
.main-content{
    position: relative;
    top: 124px;
    left: 135px;
    width: 1230px;
    height: 624px;
    border-radius: 10px;
    background-color: rgb(247, 243, 243);
}
</style>
